<template>
    <div class="mask-layer-container">
        <i class="el-icon-caret-left direction-icon-left" @click="handleArrowClick('left')"></i>
        <i class="el-icon-caret-top direction-icon-top" @click="handleArrowClick('top')"></i>
        <i class="el-icon-caret-right direction-icon-right" @click="handleArrowClick('right')"></i>
        <i class="el-icon-caret-bottom direction-icon-bottom" @click="handleArrowClick('bottom')"></i>
    </div>
</template>

<script>
export default {
    name: 'FeatureFocus',
    methods: {
        handleArrowClick(signStr) {
            
        },
    }
}
</script>

<style lang="scss" scoped>

    .mask-layer-container {
        position: relative;
        width: 100%;
        height: 100%;
        background: transparent;

        .direction-icon-left {
            position: absolute;
            font-size: 64px;
            color: #303133;
            left: 0;
            top: 46%;
            z-index: 1;
        }

        .direction-icon-left:hover {
            color: aqua !important;
        }

        .direction-icon-top {
            position: absolute;
            top: 0;
            left: 50%;
            font-size: 64px;
            color: #303133;
            z-index: 1;
        }

        .direction-icon-top:hover {
            color: aqua !important;
        }

        .direction-icon-right {
            position: absolute;
            right: 0;
            top: 46%;
            font-size: 64px;
            color: #303133;
            z-index: 1;
        }

        .direction-icon-right:hover {
            color: aqua !important;
        }

        .direction-icon-bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            font-size: 64px;
            color: #303133;
            z-index: 1;
        }

        .direction-icon-bottom:hover {
            color: aqua !important;
        }

    }
    
</style>